<template>
<div class="container">
    <div class="header">
        <NavBar title="积分转余额" left-arrow color="#333333" @click-left="back" @click-right="backHome">
            <template #right>
                <Icon name="wap-home-o" size="20" />
            </template>
        </NavBar>
    </div>
    <div class="main">
        <div class="jibox">
            <div class="top flex align-items space-between">
                <div class="left">
                    <span class="spa">积分转换</span>
                    <span class="spb">(100积分=￥10)</span>
                </div>
                <div class="right" @click='jifen = total'>全部转换</div>
            </div>
            <input type="number" class="ipt-value" v-model='jifen' placeholder="请输入转换的积分">
            <div class="current flex align-items flex-start">
                <div class="spa">当前可转换积分</div>
                <div class="spb">{{ total }}</div>
            </div>
        </div>
        <div class="btns">
            <Button type="info" block @click='submit'>确认转换</Button>
        </div>
    </div>
</div>
</template>

<script>
import {
    NavBar,
    Icon,
    Button,Dialog
} from "vant";
import { getUserInfo , jifenToMoney } from '@/model/api'
export default {
    components: {
        NavBar,
        Icon,
        Button
    },
    data() {
        return {
            total:"",
            jifen:"",
        };
    },
    methods:{
        async submit(){
            if(Number(this.jifen) > Number(this.total)){
                this.$toast({
                    type:"fail",
                    message:"请输入积分数值少于最大值"
                })
                return false
            }
            let { code , msg } = await jifenToMoney({
                score:this.jifen,
            })
            if(code == 1){
                Dialog.alert({
                    message:msg,
                }).then( () => {
                    this.$router.go(-1);
                })
            }else{
                this.$toast({
                    type:"fail",
                    message:msg
                })
            }
        }
    },
    async created(){
        let { data , code } = await getUserInfo();
        if(code == 1){
            this.total = data.score;

        }
    }
};
</script>

<style lang="less" scoped>
.jibox {
    width: 100%;
    height: auto;
    background-color: #fff;
    padding: 0 14px;

    .top {
        width: 100%;
        padding: 15px 0;

        .spa {
            font-size: 16px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #222222;
        }

        .spb {
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #999999;
        }

        .right {
            font-size: 14px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #5652FF;
        }
    }

    .ipt-value {
        width: 100%;
        padding: 10px 0;
        font-size: 23px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #333;
        border-bottom: 1px solid #EAEAEA;
    }

    .ipt-value::placeholder {
        font-size: 23px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #CCCCCC;
    }

    .current {
        width: 100%;
        height: auto;
        padding: 15px 0;

        .spa {
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #9A9A9A;
        }

        .spb {
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #FF5522;
        }
    }
}

.btns {
    width: 100%;
    padding: 0 14px;
    margin-top: 50px;
}
</style>
